<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, reactive, ref, nextTick, onBeforeUnmount } from "vue";
import {
  PlayCircleOutlined,
  FormatPainterOutlined,
} from "@ant-design/icons-vue";

import $ from "jquery";
import * as echarts from "echarts";
import js_beautify from "js-beautify";

import china from "../../assets/js/echarts/china.json"
// import ace from "ace-builds";
import ace from "ace-builds";
import "/src/assets/js/ace/ace";
import "/src/assets/js/ace/theme-github";
import "/src/assets/js/ace/mode-javascript";
import "/src/assets/js/ace/ext-language_tools";
import dataDetail from "../../data-details";
// import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
ace.config.set("basePath", "/node_modules/ace-builds/src-min-noconflict");
//   import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
//   import 'ace-builds/src-noconflict/mode-javascript' // 默认设置的语言模式
// import "ace-builds/webpack-resolver";
// import "ace-builds/src-noconflict/theme-monokai"; // 默认设置的主题
// import monokai from "ace-builds/src-noconflict/theme-monokai";
// import "ace-builds/src-noconflict/mode-javascript"; // 默认设置的语言模式

// ace.require("ace/ext/language_tools");
echarts.registerMap('china', china);

const main = ref();
const router = useRouter();
const route = useRoute();
const { type } = route.query;
const checked = ref(false);
const { id } = route.params;
const isShowImg = ref(false)
let itemDate = JSON.parse(localStorage.getItem('item'))
let values;
  for (let value of dataDetail) {
  if (value.id == id) {
    values = value.option;
    break;
  }
  }
if(itemDate){
  values = itemDate.code
}
console.log(itemDate);


let AceCodeEditor = reactive({});
const themePath = "ace/theme/github";
const modePath = "ace/mode/javascript";

const AceCodeEditorRef = ref(null);
// 基于准备好的dom，初始化echarts实例
let myChart;

const init = async () => {
  let obj = await getOption(values);
  obj && setEcharts(obj);
};

onMounted(() => {
  myChart = echarts.init(main.value);
  AceCodeEditor = ace.edit(AceCodeEditorRef.value, {
    maxLines: 57, // 最大行数，超过会自动出现滚动条
    minLines: 50, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
    fontSize: 12, // 编辑器内字体大小
    theme: themePath, // 默认设置的主题
    mode: modePath, // 默认设置的语言模式
    tabSize: 4, // 制表符设置为 4 个空格大小
    // readOnly: true,
    highlightActiveLine: true,
    tooltipFollowsMouse: true,
    value: formatCode(values),
  });
  AceCodeEditor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
  });
  // AceCodeEditor.setTheme("ace/theme/github");
  AceCodeEditor.execCommand("find");
  init();
  window.addEventListener("resize", () => {
    return (() => {
      nextTick(() => {
        myChart.resize();
      });
    })();
  });
  console.log(main.value);
});
// let option = {};
async function handleRun() {
  const option = AceCodeEditor.getValue();
  //
  //   eval(option);
  let obj = await getOption(option);
  console.log(obj);
  obj && setEcharts(obj);
}
const getOption = async (option) => {
  let fun = new Function(
    "echarts",
    "myChart",
    "$",
    "var option;" + option + " ;return option"
  );
  // let fun = new Function('echarts',"return (" + option + ")");
  let res = await fun(echarts, myChart, $);
  console.log(res);
  if(!res){
    isShowImg.value = true
  }
  return res;
};
const setEcharts = (option) => {
  myChart.setOption(option);
};
function formatCode(value) {
  return js_beautify(value);
}
const format = () => {
  const option = AceCodeEditor.getValue();
  AceCodeEditor.setValue(formatCode(option));
};
onBeforeUnmount(()=>{
  localStorage.removeItem('item')
})
</script>
<template>
  <a-layout-header style="background: #fff; padding: 0">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      :title="type"
      sub-title=""
      @back="() => router.go(-1)"
  /></a-layout-header>
  <div class="actions">
    <div class="lefts">
      <a-button @click="handleRun" type="primary"
        ><play-circle-outlined />运行</a-button
      >
      <a-button @click="format" type="primary" style="margin-left: 10px"
        ><format-painter-outlined />格式化</a-button
      >
    </div>
    <div class="rights">
      <a-switch v-model:checked="checked" /><span>深色模式</span>
    </div>
  </div>
  <div class="flex">
    <div class="left">
      <div class="AceCodeEditor" ref="AceCodeEditorRef"></div>
    </div>
    <div class="right" :class="{ active: checked }">
      <div v-if="!isShowImg" ref="main" class="main">
      </div>
      <img v-if="isShowImg" :src="itemDate.thumbnailURL" alt="" />
    </div>
  </div>
</template>
<style scoped>
.flex {
  display: flex;
  width: 100%;
  background-color: #f3f4fa;
}
.left {
  flex: 1;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
}
.AceCodeEditor {
  height: calc(100vh - 123px) !important;
}
.right {
  width: 60%;
  height: calc(100vh - 134px) !important;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 15px;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
}
.main {
  width: 90%;
  height: 90%;
}
.active {
  background-color: rgb(16, 12, 42);
}
.actions {
  display: flex;
  padding-top: 18px;
  padding-bottom: 9px;
  background-color: #f3f4fa;
}
.actions > .lefts {
  flex: 1;
  text-align: right;
  margin-right: 30px;
}
.actions > .rights {
  text-align: left;
  width: 60%;
  line-height: 32px;
}
.actions > .rights > span {
  position: relative;
  top: 1px;
  left: 5px;
}
</style>
